{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% block page_image %}{{ static('img/firefox/features/tips/tips-and-tools.png') }}{% endblock %}

{% from "macros-protocol.html" import split, callout, zap, card, callout_compact with context %}

{% block page_title %}Firefox Tips and Tools{% endblock %}
{% block page_desc %}Our favorite Firefox tips, tricks and nerd-friendly features to help you get the most of your time online – it’s kind of like our version of a secret menu.{% endblock %}

{% block body_id %}firefox-tips{% endblock %}

{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_tips') }}
{% endblock %}

{% if variation == 'eyedropper' %}
  {% set media_include = 'firefox/features/tips/includes/eyedropper-bram.html' %}
{% elif variation == 'forget' %}
  {% set media_include = 'firefox/features/tips/includes/forget-damiano.html' %}
{% elif variation == 'picture-in-picture' %}
  {% set media_include = 'firefox/features/tips/includes/pip-tina.html' %}
{% else %}
  {% set media_include = 'firefox/features/tips/includes/password-nneka.html' %}
{% endif %}

{% block content %}
  <main>
    {% call split(
      block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
      theme_class='mzp-t-dark',
      media_class='mzp-l-split-h-center',
      media_include=media_include,
      media_after=True,
    ) %}
      <h1>{{ self.page_title() }}</h1>
      <p>{{ self.page_desc() }}</p>
      {{ download_firefox_thanks(dom_id='tips-header-download', download_location='primary') }}
    {% endcall %}

    <section class="mzp-l-content">
      <h2 class="mzp-c-section-heading mzp-has-zap-11">Our <strong>Favorites</strong></h2>

      <div class="mzp-l-card-hero">
      <!-- send tabs -->
      {{ card(
        title='Send tabs between devices',
        ga_title='Send tabs between devices',
        tag_label='Hilda from Engineering Management',
        desc='Send tabs from Firefox on your computer to Firefox on your phone and other devices.',
        class='mzp-c-card-large',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='aHpCLDQ_2ns',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_send-tabs_hilda.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#send-tabs'
      )}}

      <!-- email/relay -->
      {{ card(
        title='Create burner email addresses',
        ga_title='Create burner email addresses',
        tag_label='Luke from Security Engineering',
        desc='Sign up for things you might not want. Firefox Relay helps you keep your real email address private and your inbox uncluttered.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='hZersfIccWE',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_email_luke.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://relay.firefox.com/'
      )}}

      <!-- screenshot -->
      {{ card(
        title='Capture those receipts',
        ga_title='Capture those receipts',
        tag_label='M.J. from Editorial',
        desc='Take a quick picture of something online to save or share before the moment passes.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='-Rv5MKSBNUM',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_screenshot_mj.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#screenshots'
      )}}

       <!-- HTTps -->
      {{ card(
        title='Weed out weak websites',
        ga_title='Weed out weak websites',
        tag_label='Chris from Security Engineering',
        desc='Make sure the websites you visit are secure and encrypted so you can surf and shop with confidence.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='D6tFXSFFkfY',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_https_chris.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/security/2021/08/10/firefox-91-introduces-https-by-default-in-private-browsing/'
      )}}

      <!-- restore session -->
      {{ card(
        title='Resurrect your tabs',
        ga_title='Resurrect your tabs',
        tag_label='Mei from Product Marketing',
        desc='Accidentally closed your browser? No problem. Here’s an easy way to bring all your tabs back to life.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='XyusbCSAQg8',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_restore_mei.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#restore-session'
      )}}
    </div>

    <div class="mzp-l-card-hero">
      <!-- picture in picture -->
      {{ card(
        title='Watch while you work',
        ga_title='Watch while you work',
        tag_label='Tina from Email Marketing',
        desc='Pop out any video from its player so you can watch while you use Firefox to do other things.',
        class='mzp-c-card-large',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='X6dTBZR3Heo',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_PIP_tina.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url=url('firefox.features.picture-in-picture')
      )}}

      <!-- protections dashboard -->
      {{ card(
        title='See what’s been blocked',
        ga_title='See what’s been blocked',
        tag_label='Roux from Mobile Engineering',
        desc='See a summary of all the trackers and cookies Firefox is blocking for you.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='0cmea25xl6E',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_privacy-report_roux.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop#w_protections-dashboard'
      )}}

      <!-- Facebook container -->
      {{ card(
        title='Keep Facebook from watching you',
        ga_title="Keep Facebook from watching you",
        tag_label='Steve from Video Production',
        desc='Create a privacy fence around Facebook to keep it from tracking you around the web.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='M9DK-taZsrw',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_facebook-steve.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url=url('firefox.facebookcontainer.index')
      )}}

      <!-- password manager -->
      {{ card(
        title='Step up your password game',
        ga_title='Step up your password game',
        tag_label='Nneka from Trust & Privacy',
        desc='Automatically generate strong, complex passwords that you don’t have to remember.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='CqGZtCZVDZ0',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_password_nneka.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#password-generator'
      )}}

      <!-- eyedropper tool -->
      {{ card(
        title='Snag any color',
        ga_title='Snag any color',
        tag_label='Bram from UX',
        desc='Find out the exact hex color of anything you see online and duplicate it in other applications.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='NXomgmnfU_Y',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_eyedropper_bram.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#eyedropper-tool'
      )}}
    </div>

    <div class="mzp-l-card-third">
        <!-- floating tabs -->
       {{ card(
        title='Manage your tabs',
        ga_title='Manage your tabs',
        tag_label='Natalie from Creative Studio',
        desc='Rearrange your browser tabs any way you want with ease.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='uyuBOpjPFws',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_floating-tabs_natalie.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#tab-tips'
      )}}

      <!-- forget button -->
      {{ card(
        title='Quick-erase your history',
        ga_title='Quick-erase your history',
        tag_label='Damiano from PR',
        desc='A quick way to delete your Firefox history and cookies for the last 5 minutes, or 2 hours or 24 hours in a flash.',
        aspect_ratio='mzp-has-aspect-16-9',
        youtube_id='sn9dib80w3c',
        image=resp_img('img/firefox/features/tips/fx_video-thumb_secret-menu_forget_damiano.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
        link_url='https://blog.mozilla.org/products/firefox/firefox-tips/firefox-secret-tips/#forget'
      )}}
    </div>

    {% call callout(
       title='Available now for desktop and mobile',
       heading_level=3,
       class='mzp-t-product-firefox mzp-t-background-secondary',
       include_cta=True,
       brand=True,
       brand_type='logo',
       brand_product='firefox',
       brand_size='lg'
       ) %}
        {{ download_firefox_thanks(dom_id='tips-callout-download', download_location='secondary') }}
    {% endcall %}
  </section>

  {% call callout_compact(
      title='The account that protects you rather than profits off you.',
      class='mzp-t-product-family mzp-t-firefox  mzp-t-background-tertiary hide-from-legacy-ie',
      heading_level=3,
      brand=True,
      brand_type='logo',
      brand_product='mozilla',
      brand_size='lg'
    ) %}
    <a href="{{ url('mozorg.account') }}" class="mzp-c-button mzp-t-product mzp-t-dark" id="fxa-learn-secondary">{{ ftl('ui-learn-more') }}</a>
  {% endcall %}
  </main>
{% endblock %}

{% block js %}
  {{ js_bundle('protocol-modal') }}
  {{ js_bundle('video-modal-embed') }}
{% endblock %}
